<template>
  <ElForm label-width="120" label-position="left" class="user-info">
    <ElFormItem label="姓名">
      <ElInput v-if="edit" v-model="data.name"/>
      <span v-else>{{ data.name || '--' }}</span>
    </ElFormItem>

    <ElFormItem label="花名">
      <ElInput v-if="edit" v-model="data.flowerName"/>
      <span v-else>{{ data.flowerName || '--' }}</span>
    </ElFormItem>

    <ElFormItem label="手机号码">
      <ElInput v-if="edit" v-model="data.mobile"/>
      <span v-else>{{ data.mobile || '--' }}</span>
    </ElFormItem>

    <ElFormItem label="电话号码">
      <ElInput v-if="edit" v-model="data.tel"/>
      <span v-else>{{ data.tel || '--' }}</span>
    </ElFormItem>

    <ElFormItem label="办公室">
      <ElInput  v-if="edit" v-model="data.officeLocation"/>
      <span v-else>{{ data.officeLocation || '--' }}</span>
    </ElFormItem>

    <ElButton v-if="edit" type="primary" link @click="onSave">保存</ElButton>
    <ElButton v-else type="primary" link @click="edit = true">修改</ElButton>


  </ElForm>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/plugins/store'
import { getUserInfo, updateUserInfo } from '../api'

const edit = ref(false)
const data = reactive<any>({})

const user = useUserStore()

getUserInfo()
  .then(res => {
    Object.assign(data, res || {})
  })

const onSave = () => {
  updateUserInfo(data)
    .then(() => {
      ElMessage({
        message: '操作成功！',
        type: 'success'
      })
      edit.value = false
      user.getUser()
    })
}

</script>

<style scoped lang="scss">
.user-info {
  max-width: 700px;
  margin-left: 150px;
}
</style>